<script setup lang="ts">
import { findMenuItems } from "@/utils";
import { navMenu } from "@/utils/constant/menu";
import dayjs from "dayjs";
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();

const modList = findMenuItems(navMenu, ["Product-Pool", "Product-Template"]);

const time = ref(dayjs().format("YYYY-MM-DD HH:mm"));

const toCard = (item) => {
  router.push({ name: item.key });
};
</script>

<template>
  <div>
    <a-page-header title="以下数据为所有店铺总和" :sub-title="time + ' 数据整点更新'">
      <template #tags>
        <a-button key="1" type="primary" size="small">刷新</a-button>
      </template>
      <a-row type="flex" class="data-row">
        <a-statistic title="今日订单总数" value="1000" />
        <a-statistic title=" 今日支付总额" prefix="¥" :value="1000000.00" />
        <a-statistic title=" 今日采购总额" prefix="¥" :value="10000.00" />
        <a-statistic title=" 今日利润（未排除抖店扣点）" prefix="¥" :value="900000.00" />
        <a-statistic title=" 异常订单" value="0" />
      </a-row>
    </a-page-header>
    <a-card class="mt-16px">
      <a-card-grid v-for="(item, idx) in modList" :key="idx" class="card-item" @click="toCard(item)">
        <component :is="item.icon" />
        <div>{{  item.title }}</div>
        <div>{{ item.desc }}</div>
      </a-card-grid>
    </a-card>
  </div>
</template>

<style lang="postcss" scoped>
.data-row {
  justify-content: space-between;
  margin-top: 18px;
}
.card-item {
  width: 33%;
  text-align: center;
  cursor: pointer;
  span {
    font-size: 42px;
  }
  div {
    margin-top: 16px;
    &:nth-child(2) {
      font-size: 22px;
    }
  }
}
</style>
